<template>
  <div class="questionnaire-detail page-container">
    <div class="bg">
      <div class="header">
        <button class="back-button" @click="goBack">
          <i class="el-icon-arrow-left"></i> 返回
        </button>
        <h2 v-if="personData">{{ personData.姓名 }}的{{ questionnaireType }}量表</h2>
        <h2 v-else>量表详情</h2>
      </div>

      <div v-if="loading" class="loading">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>

      <div v-else-if="!personData" class="not-found">
        <p>未找到人员信息</p>
        <button class="back-button" @click="goBack">返回列表</button>
      </div>

      <div v-else class="detail-content">
        <!-- 上半部分：基本信息和六维图 -->
        <div class="top-section">
          <!-- 基本信息卡片 -->
          <div class="info-card basic-info half-width">
            <div class="card-header">
              <h3>基本信息</h3>
            </div>
            <div class="card-body">
              <div class="info-item">
                <span class="label">姓名：</span>
                <span class="value">{{ personData.姓名 }}</span>
              </div>
              <div class="info-item">
                <span class="label">性别：</span>
                <span class="value">{{ personData.性别 }}</span>
              </div>
              <div class="info-item">
                <span class="label">出生年月日：</span>
                <span class="value">{{ personData.出生年月日 || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="label">现居住地：</span>
                <span class="value">{{ personData.现居住地 || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="label">所在地区类型：</span>
                <span class="value">{{ personData.所在地区类型 || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="label">专业：</span>
                <span class="value">{{ personData.专业 || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="label">兴趣爱好：</span>
                <span class="value">{{ personData.兴趣爱好 || '未填写' }}</span>
              </div>
            </div>
          </div>

          <!-- 学员六维图 -->
          <div class="info-card radar-chart half-width">
            <div class="card-header">
              <h3>学员六维图</h3>
            </div>
            <div class="card-body">
              <div ref="radarChart" class="radar-container"></div>
            </div>
          </div>
        </div>

        <!-- 风险情况模块 -->
        <div class="risk-situation-section">
          <div class="info-card risk-situation-info full-width">
            <div class="card-header">
              <h3>风险情况</h3>
            </div>
            <div class="card-body">
              <div class="risk-items-container">
                <div
                  v-for="risk in riskItems"
                  :key="risk.name"
                  class="risk-item"
                  :class="risk.class"
                >
                  <span class="risk-label">{{ risk.name }}</span>
                  <span class="risk-value">{{ risk.value }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 下半部分：运动板块和骨干板块 -->
        <div class="bottom-section">
          <!-- 运动信息卡片 -->
          <div class="info-card sports-info half-width">
            <div class="card-header">
              <h3>运动</h3>
            </div>
            <div class="card-body">
              <div class="info-item">
                <span class="label">运动：</span>
                <span class="value" :class="getSportsLevelClass(personData.运动)">{{ personData.运动 || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="label">伤势或后遗症：</span>
                <span class="value">{{ personData.伤势或后遗症 || '无' }}</span>
              </div>
              <div class="info-item">
                <span class="label">3公里：</span>
                <span class="value">{{ personData['3公里'] || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="label">引体向上：</span>
                <span class="value">{{ personData.引体向上 || '未填写' }}</span>
              </div>
            </div>
          </div>

          <!-- 骨干信息卡片 -->
          <div class="info-card backbone-info half-width">
            <div class="card-header">
              <h3>骨干</h3>
            </div>
            <div class="card-body">
              <div class="info-item">
                <span class="label">担任骨干潜力：</span>
                <span class="value" :class="getBackboneLevelClass(personData.担任骨干潜力)">{{ personData.担任骨干潜力 || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="label">参加宣传组潜力：</span>
                <span class="value">{{ personData.参加宣传组潜力 || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="label">平台和粉丝数量：</span>
                <span class="value">{{ personData.平台和粉丝数量 || '未填写' }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 第三部分：学习板块和身体状况板块 -->
        <div class="third-section">
          <!-- 学习信息卡片 -->
          <div class="info-card study-info half-width">
            <div class="card-header">
              <h3>学习</h3>
            </div>
            <div class="card-body">
              <div class="info-item">
                <span class="label">学习：</span>
                <span class="value" :class="getStudyLevelClass(personData.学习)">{{ personData.学习 || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="label">表彰荣誉：</span>
                <span class="value">{{ personData.表彰荣誉 || '无' }}</span>
              </div>
            </div>
          </div>

          <!-- 身体状况信息卡片 -->
          <div class="info-card health-status-info half-width">
            <div class="card-header">
              <h3>身体状况</h3>
            </div>
            <div class="card-body">
              <div class="info-item">
                <span class="label">伤势或后遗症：</span>
                <span class="value">{{ personData.伤势或后遗症 || '无' }}</span>
              </div>
              <div class="info-item">
                <span class="label">作息规律：</span>
                <span class="value" :class="getSleepLevelClass(personData.作息规律)">{{ personData.作息规律 || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="label">准分子手术：</span>
                <span class="value">{{ personData.准分子手术 || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="label">过敏情况：</span>
                <span class="value">{{ personData.过敏情况 || '无' }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 第四部分：家庭情况和网赌网贷风险板块 -->
        <div class="fourth-section">
          <!-- 家庭情况信息卡片 -->
          <div class="info-card family-info half-width">
            <div class="card-header">
              <h3>家庭情况</h3>
            </div>
            <div class="card-body">
              <div class="info-item">
                <span class="label">家庭情况：</span>
                <span class="value" :class="getFamilyStatusClass(personData.家庭情况)">{{ personData.家庭情况 || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="label">家庭疾病：</span>
                <span class="value">{{ personData.家庭疾病 || '无' }}</span>
              </div>
              <div class="info-item">
                <span class="label">家庭变故：</span>
                <span class="value">{{ personData.家庭变故 || '无' }}</span>
              </div>
              <div class="info-item">
                <span class="label">单亲家庭：</span>
                <span class="value">{{ personData.单亲家庭 || '否' }}</span>
              </div>
              <div class="info-item">
                <span class="label">留守儿童：</span>
                <span class="value">{{ personData.留守儿童 || '否' }}</span>
              </div>
              <div class="info-item">
                <span class="label">家人联系频率：</span>
                <span class="value">{{ personData.家人联系频率 || '未填写' }}</span>
              </div>
            </div>
          </div>

          <!-- 网赌网贷风险信息卡片 -->
          <div class="info-card gambling-loan-risk-info half-width">
            <div class="card-header">
              <h3>网赌网贷风险</h3>
            </div>
            <div class="card-body">
              <div class="info-item">
                <span class="label">网贷风险：</span>
                <span class="value" :class="getRiskClass(personData.网贷风险)">{{ personData.网贷风险 || '无' }}</span>
              </div>
              <div class="info-item">
                <span class="label">网贷原因：</span>
                <span class="value">{{ personData.网贷原因 || '无' }}</span>
              </div>
              <div class="info-item">
                <span class="label">是否有欠款：</span>
                <span class="value">{{ personData.是否有欠款 || '否' }}</span>
              </div>
              <div class="info-item">
                <span class="label">网赌风险：</span>
                <span class="value" :class="getRiskClass(personData.网赌风险)">{{ personData.网赌风险 || '无' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'QuestionnaireDetail',
  data() {
    return {
      loading: false,
      personName: '',
      questionnaireType: '',
      personData: null,
      radarChartInstance: null
    }
  },
  computed: {
    // 计算风险项
    riskItems() {
      if (!this.personData) return [];

      const risks = [];

      // 综合风险 - 根据风险项总数判断
      const riskCount = this.calculateRiskCount();
      if (riskCount > 0) {
        risks.push({
          name: '综合风险',
          value: `${riskCount}项风险`,
          class: 'risk-comprehensive'
        });
      }

      // 运动风险
      if (this.personData.运动 === '存在风险') {
        risks.push({
          name: '运动',
          value: '存在风险',
          class: 'risk-exercise'
        });
      }

      // 适应能力风险 - 只有"偏弱"时才显示
      if (this.personData.适应能力 === '偏弱') {
        risks.push({
          name: '适应能力',
          value: this.personData.适应能力,
          class: 'risk-adaptation'
        });
      }

      // 家庭情况风险
      if (this.personData.家庭情况 === '风险偏大' || this.personData.家庭情况 === '可能有风险' || this.personData.家庭情况 === '存在隐患') {
        risks.push({
          name: '家庭情况',
          value: this.personData.家庭情况,
          class: 'risk-family'
        });
      }

      // 社交风险 - 只有"存在风险"时才显示
      if (this.personData.社交情况 === '存在风险') {
        risks.push({
          name: '社交',
          value: this.personData.社交情况,
          class: 'risk-social'
        });
      }

      // 网赌网贷风险
      if (this.personData.网贷风险 === '有' || this.personData.网赌风险 === '有') {
        const riskText = [];
        if (this.personData.网贷风险 === '有') riskText.push('网贷');
        if (this.personData.网赌风险 === '有') riskText.push('网赌');
        risks.push({
          name: '网赌网贷风险',
          value: riskText.join('、') + '风险',
          class: 'risk-gambling'
        });
      }

      return risks;
    }
  },
  mounted() {
    this.initializeData();
  },
  beforeDestroy() {
    if (this.radarChartInstance) {
      this.radarChartInstance.dispose();
    }
  },
  methods: {
    initializeData() {
      this.loading = true;

      // 从路由参数获取数据
      this.personName = this.$route.params.name || '未知';

      const type = this.$route.params.type || 'first';
      this.questionnaireType = this.getQuestionnaireTypeName(type);

      // 从查询参数获取详细数据
      if (this.$route.query.data) {
        try {
          this.personData = JSON.parse(this.$route.query.data);
          this.$nextTick(() => {
            this.initRadarChart();
          });
        } catch (error) {
          console.error('解析人员数据失败:', error);
        }
      }

      this.loading = false;
    },

    getQuestionnaireTypeName(type) {
      const typeMap = {
        'first': '第一次',
        'second': '第二次',
        'third': '第三次'
      };
      return typeMap[type] || '第一次';
    },

    // 计算各维度分数和等级
    calculateDimensionData() {
      if (!this.personData) return {};

      const data = {};

      // 运动维度 (3个等级)
      const sportValue = this.personData.运动 || '';
      if (sportValue === '优秀') {
        data.运动 = { score: 100, level: '优秀' };
      } else if (sportValue === '良好') {
        data.运动 = { score: 67, level: '良好' };
      } else if (sportValue === '存在风险') {
        data.运动 = { score: 33, level: '存在风险' };
      } else {
        data.运动 = { score: 0, level: '未知' };
      }

      // 家庭情况维度 (3个等级)
      const familyValue = this.personData.家庭情况 || '';
      if (familyValue === '良好') {
        data.家庭情况 = { score: 100, level: '良好' };
      } else if (familyValue === '可能有风险') {
        data.家庭情况 = { score: 67, level: '可能有风险' };
      } else if (familyValue === '风险偏大') {
        data.家庭情况 = { score: 33, level: '风险偏大' };
      } else {
        data.家庭情况 = { score: 0, level: '未知' };
      }

      // 社交维度 (3个等级)
      const socialValue = this.personData.社交情况 || '';
      if (socialValue === '优秀') {
        data.社交 = { score: 100, level: '优秀' };
      } else if (socialValue === '适中') {
        data.社交 = { score: 67, level: '适中' };
      } else if (socialValue === '存在风险') {
        data.社交 = { score: 33, level: '存在风险' };
      } else {
        data.社交 = { score: 0, level: '未知' };
      }

      // 网赌网贷风险维度 (3个等级)
      const wangdaiRisk = this.personData.网贷风险 || '无';
      const wangduRisk = this.personData.网赌风险 || '无';

      let riskLevel = '';
      let riskScore = 0;

      // 根据网贷风险和网赌风险计算等级和分数
      if (wangdaiRisk === '无' && wangduRisk === '无') {
        riskLevel = '优秀';
        riskScore = 100; // 100分制的100分
      } else if ((wangdaiRisk === '有' && wangduRisk === '无') || (wangdaiRisk === '无' && wangduRisk === '有')) {
        riskLevel = '存在风险';
        riskScore = 67; // 100分制的67分 (100/3*2取整)
      } else if (wangdaiRisk === '有' && wangduRisk === '有') {
        riskLevel = '高风险';
        riskScore = 33; // 100分制的33分 (100/3取整)
      } else {
        riskLevel = '未知';
        riskScore = 0;
      }

      data.网赌网贷风险 = { score: riskScore, level: riskLevel };

      // 骨干潜力维度 (4个等级)
      const leaderValue = this.personData.担任骨干潜力 || '';
      if (leaderValue === '优秀') {
        data.骨干潜力 = { score: 100, level: '优秀' };
      } else if (leaderValue === '良好') {
        data.骨干潜力 = { score: 75, level: '良好' };
      } else if (leaderValue === '一般') {
        data.骨干潜力 = { score: 50, level: '一般' };
      } else if (leaderValue === '偏弱') {
        data.骨干潜力 = { score: 25, level: '偏弱' };
      } else {
        data.骨干潜力 = { score: 0, level: '未知' };
      }

      // 适应能力维度 (综合计算)
      const adaptationData = this.calculateAdaptationScore();
      data.适应能力 = adaptationData;

      return data;
    },

    // 计算适应能力综合分数
    calculateAdaptationScore() {
      if (!this.personData) return { score: 0, level: '未知' };

      let totalScore = 0;
      let maxScore = 10; // 3+4+3

      // 适应住宿 (3个等级: 3,2,1分)
      const accommodationValue = this.personData.适应住宿 || '';
      if (accommodationValue === '优秀') {
        totalScore += 3;
      } else if (accommodationValue === '适中') {
        totalScore += 2;
      } else if (accommodationValue === '偏弱') {
        totalScore += 1;
      }

      // 适应管理 (4个等级: 4,3,2,1分)
      const managementValue = this.personData.适应管理 || '';
      if (managementValue === '优秀') {
        totalScore += 4;
      } else if (managementValue === '良好') {
        totalScore += 3;
      } else if (managementValue === '一般') {
        totalScore += 2;
      } else if (managementValue === '偏弱') {
        totalScore += 1;
      }

      // 适应训练 (3个等级: 3,2,1分)
      const trainingValue = this.personData.适应训练 || '';
      if (trainingValue === '优秀') {
        totalScore += 3;
      } else if (trainingValue === '适中') {
        totalScore += 2;
      } else if (trainingValue === '偏弱') {
        totalScore += 1;
      }

      // 转换为100分制
      const score = Math.round((totalScore / maxScore) * 100);

      // 确定等级
      let level = '';
      if (score >= 80) {
        level = '优秀';
      } else if (score >= 60) {
        level = '良好';
      } else if (score >= 40) {
        level = '一般';
      } else {
        level = '偏弱';
      }

      return { score, level };
    },

    // 初始化雷达图
    initRadarChart() {
      if (!this.$refs.radarChart) return;

      const dimensionData = this.calculateDimensionData();

      // 准备雷达图数据，在维度名称后添加等级信息
      const indicators = [
        {
          name: `运动（${dimensionData.运动?.level || '未知'}）`,
          max: 100
        },
        {
          name: `家庭情况（${dimensionData.家庭情况?.level || '未知'}）`,
          max: 100
        },
        {
          name: `社交（${dimensionData.社交?.level || '未知'}）`,
          max: 100
        },
        {
          name: `网赌网贷风险（${dimensionData.网赌网贷风险?.level || '未知'}）`,
          max: 100
        },
        {
          name: `骨干潜力（${dimensionData.骨干潜力?.level || '未知'}）`,
          max: 100
        },
        {
          name: `适应能力（${dimensionData.适应能力?.level || '未知'}）`,
          max: 100
        }
      ];

      const values = [
        dimensionData.运动?.score || 0,
        dimensionData.家庭情况?.score || 0,
        dimensionData.社交?.score || 0,
        dimensionData.网赌网贷风险?.score || 0,
        dimensionData.骨干潜力?.score || 0,
        dimensionData.适应能力?.score || 0
      ];

      const levels = [
        dimensionData.运动?.level || '未知',
        dimensionData.家庭情况?.level || '未知',
        dimensionData.社交?.level || '未知',
        dimensionData.网赌网贷风险?.level || '未知',
        dimensionData.骨干潜力?.level || '未知',
        dimensionData.适应能力?.level || '未知'
      ];

      // 初始化图表
      this.radarChartInstance = echarts.init(this.$refs.radarChart);

      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          show: true,
          trigger: 'item',
          backgroundColor: 'rgba(19, 25, 47, 0.9)',
          borderColor: '#68d8fe',
          borderWidth: 1,
          textStyle: {
            color: '#d3d6dd',
            fontSize: 12
          },
          formatter: function(params) {
            // 处理雷达图数据点的悬停
            if (params.componentType === 'series' && params.seriesType === 'radar') {
              // 显示所有维度的信息
              let content = '<div style="text-align: left; padding: 8px; min-width: 150px;">';
              content += '<div style="font-weight: bold; margin-bottom: 8px; color: #68d8fe; font-size: 14px; text-align: center;">' + (params.data.name || '学员六维图') + '</div>';

              for (let i = 0; i < indicators.length && i < values.length; i++) {
                const name = indicators[i].name;
                const score = values[i];
                const level = levels[i];
                content += '<div style="margin-bottom: 4px; color: #d3d6dd; display: flex; justify-content: space-between;">';
                content += '<span>' + name + ':</span>';
                content += '<span style="color: #68d8fe; font-weight: bold;">' + score + '分(' + level + ')</span>';
                content += '</div>';
              }

              content += '</div>';
              return content;
            }
            return '';
          }
        },
        radar: {
          indicator: indicators,
          center: ['50%', '50%'],
          radius: '70%',
          startAngle: 90,
          splitNumber: 4,
          shape: 'polygon',
          name: {
            formatter: (value) => {
              // 从维度名称中提取等级信息
              const match = value.match(/^(.+?)（(.+?)）$/);
              if (match) {
                const dimensionName = match[1];
                const level = match[2];
                // 根据等级选择对应的样式
                let levelStyle = 'levelDefault';
                switch(level) {
                  case '优秀':
                    levelStyle = 'levelExcellent';
                    break;
                  case '良好':
                    levelStyle = 'levelGood';
                    break;
                  case '存在风险':
                  case '可能有风险':
                  case '一般':
                  case '中等':
                  case '不规律':
                  case '适中':
                    levelStyle = 'levelWarning';
                    break;
                  case '偏弱':
                  case '风险偏大':
                  case '高风险':
                    levelStyle = 'levelDanger';
                    break;
                }
                return `{dimension|${dimensionName}}{${levelStyle}|(${level})}`;
              }
              return value;
            },
            rich: {
              dimension: {
                color: '#68d8fe',
                fontSize: 12,
                fontWeight: 'bold'
              },
              levelExcellent: {
                color: '#67c23a', // 绿色 - 优秀
                fontSize: 12,
                fontWeight: 'bold'
              },
              levelGood: {
                color: '#409eff', // 蓝色 - 良好
                fontSize: 12,
                fontWeight: 'bold'
              },
              levelWarning: {
                color: '#e6a23c', // 黄色 - 一般/风险
                fontSize: 12,
                fontWeight: 'bold'
              },
              levelDanger: {
                color: '#f56c6c', // 红色 - 偏弱/高风险
                fontSize: 12,
                fontWeight: 'bold'
              },
              levelDefault: {
                color: '#68d8fe', // 默认蓝色
                fontSize: 12,
                fontWeight: 'bold'
              }
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(104, 216, 254, 0.3)',
              width: 1
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: [
                'rgba(104, 216, 254, 0.05)',
                'rgba(104, 216, 254, 0.1)',
                'rgba(104, 216, 254, 0.05)',
                'rgba(104, 216, 254, 0.1)'
              ]
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(104, 216, 254, 0.5)',
              width: 1
            }
          }
        },
        series: [{
          name: '学员六维图',
          type: 'radar',
          data: [{
            value: values,
            name: this.personData?.姓名 || '学员',
            itemStyle: {
              color: '#68d8fe',
              borderColor: '#ffffff',
              borderWidth: 1
            },
            lineStyle: {
              color: '#68d8fe',
              width: 2
            },
            areaStyle: {
              color: 'rgba(104, 216, 254, 0.2)'
            },
            symbol: 'circle',
            symbolSize: 8,
            emphasis: {
              itemStyle: {
                color: '#4bc8fe',
                borderColor: '#ffffff',
                borderWidth: 2
              },
              symbolSize: 12
            }
          }]
        }]
      };

      this.radarChartInstance.setOption(option);

      // 添加自定义tooltip处理
      let currentTooltipIndex = -1;
      const chartContainer = this.$refs.radarChart;

      // 监听图表容器的鼠标移动事件
      chartContainer.addEventListener('mousemove', (e) => {
        const rect = chartContainer.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        // 获取图表中心点
        const centerX = chartContainer.offsetWidth / 2;
        const centerY = chartContainer.offsetHeight / 2;

        // 计算鼠标相对于中心的角度
        const angle = Math.atan2(y - centerY, x - centerX);
        let normalizedAngle = (angle * 180 / Math.PI + 90 + 360) % 360;

        // 计算对应的维度索引
        const anglePerDimension = 360 / indicators.length;
        let dimensionIndex = Math.round(normalizedAngle / anglePerDimension) % indicators.length;

        // 计算距离中心的距离
        const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
        const maxRadius = Math.min(centerX, centerY) * 0.7; // 雷达图半径约为70%

        // 只有在雷达图范围内才显示tooltip
        if (distance <= maxRadius && dimensionIndex !== currentTooltipIndex) {
          currentTooltipIndex = dimensionIndex;

          // 显示对应维度的tooltip
          const name = indicators[dimensionIndex].name;
          const score = values[dimensionIndex];
          const level = levels[dimensionIndex];

          const tooltipContent = `
            <div style="text-align: center; padding: 8px; min-width: 120px;">
              <div style="font-weight: bold; margin-bottom: 8px; color: #68d8fe; font-size: 14px;">${name}</div>
              <div style="margin-bottom: 4px; color: #d3d6dd;">分数: <span style="color: #68d8fe; font-weight: bold;">${score}</span></div>
              <div style="color: #d3d6dd;">等级: <span style="color: #68d8fe; font-weight: bold;">${level}</span></div>
            </div>
          `;

          // 创建自定义tooltip元素
          this.showCustomTooltip(e.clientX + 10, e.clientY - 10, tooltipContent);
        } else if (distance > maxRadius) {
          // 鼠标移出雷达图范围时隐藏tooltip
          currentTooltipIndex = -1;
          this.hideCustomTooltip();
        }
      });

      // 监听鼠标离开图表容器事件
      chartContainer.addEventListener('mouseleave', () => {
        currentTooltipIndex = -1;
        this.hideCustomTooltip();
      });

      // 添加鼠标事件监听
      this.radarChartInstance.on('mouseover', (params) => {
        if (params.componentType === 'series' && params.seriesType === 'radar') {
          // 高亮当前悬停的数据点
          this.radarChartInstance.dispatchAction({
            type: 'highlight',
            seriesIndex: params.seriesIndex,
            dataIndex: params.dataIndex
          });
        }
      });

      this.radarChartInstance.on('mouseout', (params) => {
        if (params.componentType === 'series' && params.seriesType === 'radar') {
          // 取消高亮
          this.radarChartInstance.dispatchAction({
            type: 'downplay',
            seriesIndex: params.seriesIndex,
            dataIndex: params.dataIndex
          });
        }
      });

      // 监听窗口大小变化
      const resizeHandler = () => {
        if (this.radarChartInstance) {
          this.radarChartInstance.resize();
        }
      };

      window.addEventListener('resize', resizeHandler);

      // 在组件销毁时移除监听器
      this.$once('hook:beforeDestroy', () => {
        window.removeEventListener('resize', resizeHandler);
      });
    },

    goBack() {
      this.$router.go(-1);
    },
    // 显示自定义tooltip
    showCustomTooltip(x, y, content) {
      this.hideCustomTooltip(); // 先隐藏之前的tooltip

      const tooltip = document.createElement('div');
      tooltip.id = 'custom-radar-tooltip';
      tooltip.innerHTML = content;
      tooltip.style.cssText = `
        position: fixed;
        left: ${x}px;
        top: ${y}px;
        background: rgba(19, 25, 47, 0.9);
        border: 1px solid #68d8fe;
        border-radius: 4px;
        color: #d3d6dd;
        font-size: 12px;
        z-index: 9999;
        pointer-events: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        max-width: 200px;
      `;

      document.body.appendChild(tooltip);
    },
    // 隐藏自定义tooltip
    hideCustomTooltip() {
      const tooltip = document.getElementById('custom-radar-tooltip');
      if (tooltip) {
        document.body.removeChild(tooltip);
      }
    },
    // 获取等级
    getLevel(score) {
      if (score >= 80) return '优秀';
      if (score >= 70) return '良好';
      if (score >= 60) return '一般';
      return '偏弱';
    },
    // 获取运动等级样式类
    getSportsLevelClass(level) {
      switch(level) {
        case '优秀':
          return 'sports-excellent';
        case '良好':
          return 'sports-good';
        case '存在风险':
          return 'sports-risk';
        default:
          return '';
      }
    },
    // 获取骨干等级样式类
    getBackboneLevelClass(level) {
      switch(level) {
        case '优秀':
          return 'backbone-excellent';
        case '良好':
          return 'backbone-good';
        case '一般':
          return 'backbone-average';
        case '偏弱':
          return 'backbone-weak';
        default:
          return '';
      }
    },
    // 获取学习等级样式类
    getStudyLevelClass(level) {
      switch(level) {
        case '优秀':
          return 'study-excellent';
        case '良好':
          return 'study-good';
        case '中等':
          return 'study-average';
        case '偏弱':
          return 'study-weak';
        default:
          return '';
      }
    },
    // 获取作息规律等级样式类
    getSleepLevelClass(level) {
      switch(level) {
        case '优秀':
          return 'sleep-excellent';
        case '良好':
          return 'sleep-good';
        case '不规律':
          return 'sleep-irregular';
        default:
          return '';
      }
    },

    // 获取等级对应的颜色
    getLevelColor(level) {
      switch(level) {
        case '优秀':
          return '#67c23a'; // 绿色
        case '良好':
          return '#409eff'; // 蓝色
        case '存在风险':
        case '可能有风险':
        case '一般':
        case '中等':
        case '不规律':
          return '#e6a23c'; // 黄色
        case '偏弱':
        case '风险偏大':
          return '#f56c6c'; // 红色
        case '适中':
          return '#909399'; // 灰色
        default:
          return '#68d8fe'; // 默认蓝色
      }
    },

    // 获取家庭情况等级样式类
    getFamilyStatusClass(level) {
      switch(level) {
        case '良好':
          return 'family-good';
        case '存在隐患':
          return 'family-warning';
        case '可能有风险':
          return 'family-risk';
        case '风险偏大':
          return 'family-high-risk';
        default:
          return '';
      }
    },

    // 获取网赌网贷风险样式类
    getRiskClass(risk) {
      if (risk === '有' || risk === '是' || risk === '存在风险' || risk === '高风险') {
        return 'risk-high';
      }
      return '';
    },

    // 计算风险项总数
    calculateRiskCount() {
      if (!this.personData) return 0;

      let count = 0;
      if (this.personData.运动 === '存在风险') count++;
      if (this.personData.适应能力 === '偏弱') count++; // 只计算"偏弱"
      if (this.personData.家庭情况 === '风险偏大' || this.personData.家庭情况 === '可能有风险' || this.personData.家庭情况 === '存在隐患') count++;
      if (this.personData.社交情况 === '存在风险') count++; // 只计算"存在风险"
      if (this.personData.网贷风险 === '有' || this.personData.网赌风险 === '有') count++;
      return count;
    }
  }
}
</script>

<style lang="scss" scoped>
.questionnaire-detail {
  width: 100%;
  height: 100vh;
  background-image: url("~@/assets/pageBg.png");
  background-size: cover;
  background-position: center center;
  padding: 20px;
  overflow-y: auto;
}

.bg {
  background: rgba(19, 25, 47, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(104, 216, 254, 0.2);
  backdrop-filter: blur(10px);
  padding: 20px;
  min-height: calc(100vh - 40px);
}

.header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;

  .back-button {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(104, 216, 254, 0.2);
    border: 1px solid rgba(104, 216, 254, 0.5);
    color: #68d8fe;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(104, 216, 254, 0.3);
      transform: translateY(-50%) translateX(-2px);
    }
  }

  h2 {
    color: #68d8fe;
    font-size: 28px;
    font-weight: bold;
    margin: 0;
    text-shadow: 0 0 10px rgba(104, 216, 254, 0.3);
  }
}

.loading {
  text-align: center;
  padding: 60px 20px;

  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(104, 216, 254, 0.3);
    border-top: 3px solid #68d8fe;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
  }

  p {
    color: #d3d6dd;
    font-size: 16px;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.not-found {
  text-align: center;
  padding: 60px 20px;

  p {
    color: #d3d6dd;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .back-button {
    background: #68d8fe;
    color: #13192f;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;

    &:hover {
      background: #4bc8fe;
      transform: translateY(-1px);
    }
  }
}

.detail-content {
  max-width: 1200px;
  margin: 0 auto;
}

.top-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.bottom-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.third-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.risk-situation-section {
  margin-bottom: 20px;
}

.risk-situation-info {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 20px;
  backdrop-filter: blur(10px);
}

.risk-items-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: flex-start;
  align-items: center;
}

.risk-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  min-width: 120px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .risk-label {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
    opacity: 0.9;
  }

  .risk-value {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }

  // 综合风险 - 深红色
  &.risk-comprehensive {
    background: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.3);

    .risk-label, .risk-value {
      color: #dc3545;
    }
  }

  // 运动风险 - 橙色
  &.risk-exercise {
    background: rgba(255, 152, 0, 0.15);
    border-color: rgba(255, 152, 0, 0.3);

    .risk-label, .risk-value {
      color: #ff9800;
    }
  }

  // 适应能力风险 - 紫色
  &.risk-adaptation {
    background: rgba(156, 39, 176, 0.15);
    border-color: rgba(156, 39, 176, 0.3);

    .risk-label, .risk-value {
      color: #9c27b0;
    }
  }

  // 家庭情况风险 - 黄色
  &.risk-family {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.3);

    .risk-label, .risk-value {
      color: #ffc107;
    }
  }

  // 社交风险 - 青色
  &.risk-social {
    background: rgba(0, 188, 212, 0.15);
    border-color: rgba(0, 188, 212, 0.3);

    .risk-label, .risk-value {
      color: #00bcd4;
    }
  }

  // 网赌网贷风险 - 深紫色
  &.risk-gambling {
    background: rgba(103, 58, 183, 0.15);
    border-color: rgba(103, 58, 183, 0.3);

    .risk-label, .risk-value {
      color: #673ab7;
    }
  }
}

.fourth-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.half-width {
  flex: 1;
  min-width: 0;
}

.full-width {
  width: 100%;
}

.info-card {
  background: rgba(19, 25, 47, 0.8);
  border: 1px solid rgba(104, 216, 254, 0.3);
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;

  .card-header {
    background: rgba(104, 216, 254, 0.1);
    padding: 15px 20px;
    border-bottom: 1px solid rgba(104, 216, 254, 0.2);

    h3 {
      color: #68d8fe;
      font-size: 18px;
      font-weight: bold;
      margin: 0;
    }
  }

  .card-body {
    padding: 20px;

    .info-item {
      display: flex;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid rgba(104, 216, 254, 0.1);

      &:last-child {
        border-bottom: none;
      }

      .label {
        color: #68d8fe;
        font-weight: 500;
        min-width: 120px;
        margin-right: 15px;
      }

      .value {
        color: #d3d6dd;
        flex: 1;
        word-break: break-word;

        // 运动等级颜色样式
        &.sports-excellent {
          color: #67c23a; // 绿色 - 优秀
          font-weight: 600;
        }

        &.sports-good {
          color: #409eff; // 蓝色 - 良好
          font-weight: 600;
        }

        &.sports-risk {
          color: #e6a23c; // 黄色 - 存在风险
          font-weight: 600;
        }

        // 骨干等级颜色样式
        &.backbone-excellent {
          color: #67c23a; // 绿色 - 优秀
          font-weight: 600;
        }

        &.backbone-good {
          color: #409eff; // 蓝色 - 良好
          font-weight: 600;
        }

        &.backbone-average {
          color: #e6a23c; // 黄色 - 一般
          font-weight: 600;
        }

        &.backbone-weak {
          color: #f56c6c; // 红色 - 偏弱
          font-weight: 600;
        }

        // 学习等级颜色样式
        &.study-excellent {
          color: #67c23a; // 绿色 - 优秀
          font-weight: 600;
        }

        &.study-good {
          color: #409eff; // 蓝色 - 良好
          font-weight: 600;
        }

        &.study-average {
          color: #e6a23c; // 黄色 - 中等
          font-weight: 600;
        }

        &.study-weak {
          color: #f56c6c; // 红色 - 偏弱
          font-weight: 600;
        }

        // 作息规律等级颜色样式
        &.sleep-excellent {
          color: #67c23a; // 绿色 - 优秀
          font-weight: 600;
        }

        &.sleep-good {
          color: #409eff; // 蓝色 - 良好
          font-weight: 600;
        }

        &.sleep-irregular {
          color: #e6a23c; // 黄色 - 不规律
          font-weight: 600;
        }

        // 家庭情况等级颜色样式
        &.family-good {
          color: #67c23a; // 绿色 - 良好
          font-weight: 600;
        }

        &.family-warning {
          color: #ff9500; // 橙色 - 存在隐患
          font-weight: 600;
        }

        &.family-risk {
          color: #e6a23c; // 黄色 - 可能有风险
          font-weight: 600;
        }

        &.family-high-risk {
          color: #f56c6c; // 红色 - 风险偏大
          font-weight: 600;
        }
      }
    }
  }
}

// 家庭情况和网赌网贷风险信息布局
.family-info, .gambling-loan-risk-info {
  .info-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(104, 216, 254, 0.1);

    &:last-child {
      border-bottom: none;
    }

    .label {
      color: #68d8fe;
      font-weight: 500;
      min-width: 120px;
      margin-right: 15px;
    }

    .value {
      color: #d3d6dd;
      flex: 1;
      word-break: break-word;

      // 家庭情况等级颜色
      &.family-good {
        color: #4CAF50;
        font-weight: 600;
      }

      &.family-warning {
        color: #ff9500;
        font-weight: 600;
      }

      &.family-risk {
        color: #FF9800;
        font-weight: 600;
      }

      &.family-high-risk {
        color: #F44336;
        font-weight: 600;
      }

      // 网赌网贷风险颜色
      &.risk-high {
        color: #F44336;
        font-weight: bold;
      }
    }
  }
}

// 保持原有的家庭情况网格布局（如果其他地方还在使用）
.family-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;

  .info-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(104, 216, 254, 0.1);

    &:last-child {
      border-bottom: none;
    }

    .label {
      color: #68d8fe;
      font-weight: 500;
      min-width: 120px;
      margin-right: 15px;
    }

    .value {
      color: #d3d6dd;
      flex: 1;
      word-break: break-word;
    }
  }
}

.radar-chart {
  .card-body {
    padding: 10px;

    .radar-container {
      width: 100%;
      height: 300px;
      min-height: 300px;
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .questionnaire-detail {
    padding: 15px;
  }

  .bg {
    padding: 15px;
  }

  .header {
    .back-button {
      position: static;
      transform: none;
      margin-bottom: 15px;
      align-self: flex-start;
    }

    h2 {
      font-size: 22px;
    }
  }

  .top-section,
  .bottom-section,
  .third-section,
  .fourth-section {
    flex-direction: column;
    gap: 15px;
  }

  .risk-items-container {
    justify-content: center;
    gap: 10px;
  }

  .risk-item {
    min-width: 100px;
    padding: 10px 12px;

    .risk-label {
      font-size: 11px;
    }

    .risk-value {
      font-size: 13px;
    }
  }

  .half-width {
    flex: none;
  }

  .info-card {
    .card-header {
      padding: 12px 15px;

      h3 {
        font-size: 16px;
      }
    }

    .card-body {
      padding: 15px;

      .info-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0;

        .label {
          min-width: auto;
          margin-bottom: 5px;
          margin-right: 0;
        }

        .value {
          padding-left: 10px;
        }
      }
    }
  }

  .radar-chart {
    .card-body {
      padding: 10px;

      .radar-container {
        height: 250px;
        min-height: 250px;
      }
    }
  }

  // 移动端家庭情况网格布局
  .family-info-grid {
    grid-template-columns: 1fr;
    gap: 10px;

    .info-item {
      flex-direction: column;
      align-items: flex-start;
      padding: 10px 0;

      .label {
        min-width: auto;
        margin-bottom: 5px;
        margin-right: 0;
      }

      .value {
        padding-left: 10px;
      }
    }
  }
}
</style>
